<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group space-y-423">
			<view class="flex-col" style="height: calc(100% - 70px);">
				<view class="flex-col justify-start section_3">
					<view class="flex-col section_4 space-y-39">
						<text class="self-start font_1">服务清单</text>
						<view class="flex-row justify-between" v-for="(item,index) in content.goods_list" :key="index">
							<view class="flex-row items-center space-x-18">
								<image class="image_8" :src="item.cover_path" />
								<view class="flex-col space-y-67">
									<text class="font_1 text">{{item.service_name}}</text>
									<view class="flex-row items-baseline space-x-14">
										<view class="group_3">
											<text class="font_2">￥</text>
											<text class="font_1 text_2">{{item.price}}</text>
										</view>
										<text class="text_4">￥{{item.market_price}}</text>
									</view>
								</view>
							</view>
							<view class="flex-row items-center self-start group_2 space-x-14">
								<view class="section_5 flex-row items-center justify-center" @click="toSub(index)">
									<image class="image_9" src="/static/sub.png" />
								</view>
								<view class="flex-col justify-start items-center text-wrapper">
									<text class="font_2 text_3">{{item.quantity}}</text>
								</view>
								<view class="section_5 flex-row items-center justify-center" @click="toAdd(index)">
									<image class="image_9" src="/static/add.png" />
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-col group_4 space-y-20">
					<view class="flex-col section_6 space-y-41">
						<text class="self-start font_1">价格信息</text>
						<view class="flex-col space-y-40">
							<view class="flex-row justify-between">
								<text class="font_3">服务总额</text>
								<text class="font_3 text_5">￥{{content.goods_amounts}}</text>
							</view>
							<view class="flex-row justify-between" @click="toCoupon">
								<text class="font_3">优惠券</text>
								<view class="flex-row items-center group_5 space-x-16">
									<text class="font_4" v-if="content.coupon_amounts!=0"
										style="color: #ff3333;">-{{content.coupon_amounts}}</text>
									<text class="font_4"
										v-else-if="content.coupon_list.length>0">{{content.coupon_list.length}}张优惠券</text>
									<text class="font_4" v-else>暂无优惠券</text>
									<image class="shrink-0 image_10" src="/static/more1.png" />
								</view>
							</view>
							<view class="flex-col justify-start items-end group_6">
								<view class="group_7">
									<text class="text_7">合计金额：</text>
									<text class="font_2">￥</text>
									<text class="text_6">{{content.pay_amounts}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="flex-row justify-between section_7">
						<text class="font_3">预留手机号</text>
						<input class="font_4" cursor-spacing="200" type="text" placeholder="请填写" style="text-align: right;color: #111;" v-model="mobile" adjust-position="true">
					</view> -->
					<view class="flex-row justify-between section_7">
						<text class="font_3">预留手机号</text>
						<up-input
						    placeholder="请填写手机号"
						    border="none"
						    v-model="mobile"
							:adjustPosition="true"
							:cursorSpacing="200"
							inputAlign="right"
						  ></up-input>
					</view>
					
					<view class="flex-row justify-between section_7">
						<text class="font_3">预留地址</text>
						<!-- <input class="font_4" cursor-spacing="200" type="text" placeholder="请填写" style="text-align: right;color: #111;" v-model="address_remark" adjust-position="true"> -->
						<up-input
							placeholder="请输入预留地址"
							border="none"
							v-model="address_remark" :adjustPosition="true"
							:cursorSpacing="100"
							inputAlign="right"
						  ></up-input>
					</view>
				</view>
			</view>
			<view class="flex-row justify-between items-center section_8">
				<view class="flex-row items-center group_8">
					<text class="text_10">合计金额：</text>
					<text class="text_8">￥{{content.pay_amounts}}</text>
				</view>
				<view class="flex-col justify-start items-center button" @click="getSubmit"><text
						class="text_9">提交订单</text></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance,
		onBeforeUnmount
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	import amapFile from '../../utils/amap-uni.130.js'
	const myAmapFun = new amapFile.AMapWX({
		key: '3a26f7397fc12384590ae0a8ab25443b'
	});
	let service_id = ref('')
	let coupon_id = ref('')
	let dayp = ref(0)
	let showPopup = ref(false)
	let quantity = ref(1)
	let mobile = ref('') //手机号
	let address_remark = ref('') //地址
	
	let content = ref({
		service_info: ''
	})

	let address = ref({
		district_id: '', //定位地区编码
		address: '', //详细地址
		lng: '', //经度
		lat: '', //纬度
		adr_id: '',
	})

	// let book_date = ref('') //预定日期
	// let book_time_start = ref('') //预定时间-起
	// let book_time_end = ref('') //预定时间-止
	let remark = ref('') //备注


	let list = reactive([null, null, null, null, null])


	onLoad((option) => {
		console.log(option);
		service_id.value = option.service_id
		getDate1()
		uni.$on('mapList', function(res) {
			// console.log(res, "mapList");
			address.value = res
			getDate1()
		})
		uni.$on('coupon', function(res) {
			// console.log(res, "coupon");
			coupon_id.value = res.coupon_id
			content.value.coupon_amounts=res.coupon_amounts
			getDate1()
		})
	})
	onBeforeUnmount(() => {
		uni.$off('mapList')
		uni.$off('coupon')
	})
	const getDate1 = () => {
		proxy.$req.requestPOST(proxy.$api.FlowInfo.confirmOrder, {
			service_id: service_id.value,
			member_id: uni.getStorageSync('member_id') | '',
			quantity: quantity.value,
			coupon_member_id: coupon_id.value
		}).then(res => {
			console.log(res);
			if (res.flag == "success") {
				content.value = res.data
				if (content.value.coupon_member_id != 0) {
					coupon_id.value = content.value.coupon_id
				}
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		})
	}
	const toSub = (index) => {
		if (quantity.value > 1) {
			quantity.value--
			getDate1()
		}
	}
	const toAdd = (index) => {
		// if(quantity.value<v.stock){
		quantity.value++
		getDate1()
		// }
	}
	const getSubmit = () => {
		proxy.$req.requestPOST(proxy.$api.FlowInfo.submitOrder, {
			member_id: uni.getStorageSync('member_id') | '',
			service_id: service_id.value,
			quantity: quantity.value,
			mobile: mobile.value,
			remark: address_remark.value,
			coupon_member_id: coupon_id.value
		}).then(res => {
			console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.flag == "success") {
				let obj = {
					order_id: res.data.order_id,
					order_sn:res.data.order_sn,
					pay_amounts:res.data.pay_amounts
				}
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/payment/payment?parm=' + JSON.stringify(obj)
					})
				}, 1000)
				// proxy.$req.requestPOST(proxy.$api.FlowInfo.doPay, {
				// 	member_id: uni.getStorageSync('member_id') | '',
				// 	order_sn: res.data.order_sn,
				// 	payment: 2
				// }).then(res1 => {
				// 	console.log(res1);

				// 	if (res1.flag == "success") {
				// 		let parm = res1.data
				// 		wx.requestPayment({
				// 			timeStamp: parm.timestamp,
				// 			nonceStr: parm.noncestr,
				// 			package: parm.package,
				// 			signType: parm.signType,
				// 			paySign: parm.sign,
				// 			success(res2) {
				// 				console.log(res2);
				// 				uni.showToast({
				// 					title: "支付成功",
				// 					icon: 'success'
				// 				})
				// 				setTimeout(() => {
				// 					uni.reLaunch({
				// 						url: '/pages/myOrder/myOrder?type=0'
				// 					})
				// 				}, 1000)
				// 			},
				// 			fail(res2) {
				// 				console.log(res2);
				// 				uni.showToast({
				// 					title: "支付失败",
				// 					icon: 'error'
				// 				})
				// 				setTimeout(() => {
				// 					uni.reLaunch({
				// 						url: '/pages/myOrder/myOrder?type=0'
				// 					})
				// 				}, 1000)
				// 			}
				// 		})


				// 	} else {
				// 		uni.showToast({
				// 			title: res1.message,
				// 			icon: 'none'
				// 		})
				// 	}
				// })
			}
		})
	}
	const toCoupon=()=>{
		uni.navigateTo({
			url: '/pages/coupon1/coupon?amounts='+content.value.goods_amounts+'&service_id='+service_id.value
		})
	}
	const toAddress = () => {
		uni.navigateTo({
			url: '/pages/address/address'
		})
	}
	const toRule = () => {
		uni.navigateTo({
			url: '/pages/yonghuxieyi1/yonghuxieyi1?type=2'
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;

		.group {
			overflow-y: auto;

			.section_3 {
				padding-top: 30rpx;
				background-color: #66cccc;
				background-image: linear-gradient(0deg, #f8f8f8 0%, #eff5f0 100%);

				.section_4 {
					margin: 0 30rpx;
					padding: 36rpx 30rpx 42rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.space-x-18 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 18rpx;
						}

						.image_8 {
							border-radius: 20rpx;
							width: 160rpx;
							height: 160rpx;
						}

						.space-y-67 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-top: 67rpx;
							}

							.text {
								margin-left: 6rpx;
							}
						}
					}

					.group_2 {
						margin-top: 111rpx;

						.section_5 {
							border-radius: 2rpx;
							width: 40rpx;
							height: 40rpx;
						}

						.text-wrapper {
							padding: 8rpx 0;
							background-color: #f2f2f2;
							border-radius: 10rpx;
							width: 70rpx;
							height: 34rpx;

							.text_3 {
								color: #333333;
								line-height: 18rpx;
							}
						}

						.image_9 {
							width: 16rpx;
							height: 16rpx;
						}
					}

					.space-x-14 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 14rpx;
						}

						.group_3 {
							line-height: 25rpx;
							height: 26rpx;

							.text_2 {
								color: #ff3333;
								line-height: 25rpx;
							}
						}

						.text_4 {
							color: #9c9b9a;
							font-size: 22rpx;
							font-family: PingFangHeiTC;
							line-height: 17rpx;
							text-decoration: line-through;
						}
					}
				}

				.space-y-39 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 39rpx;
					}
				}
			}

			.group_4 {
				padding: 18rpx 30rpx 0;

				.section_6 {
					padding: 35rpx 22rpx 30rpx 30rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.space-y-40 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-top: 40rpx;
						}

						.text_5 {
							line-height: 23rpx;
						}

						.group_5 {
							margin-right: 9rpx;

							.image_10 {
								width: 9rpx;
								height: 18rpx;
							}
						}

						.space-x-16 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-left: 16rpx;
							}
						}

						.group_6 {
							padding-top: 31rpx;
							height: 64rpx;
							border-top: solid 2rpx #f8f8f8;

							.group_7 {
								line-height: 31rpx;

								.text_7 {
									color: #333333;
									font-size: 24rpx;
									font-family: PingFangSC;
									line-height: 23rpx;
								}

								.text_6 {
									color: #ff3333;
									font-size: 40rpx;
									font-family: PingFangSC;
									line-height: 31rpx;
								}
							}
						}
					}
				}

				.space-y-41 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 41rpx;
					}
				}

				.section_7 {
					padding: 42rpx 27rpx 42rpx 30rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.font_3 {
					font-size: 28rpx;
					font-family: PingFangHeiTC;
					line-height: 27rpx;
					color: #333333;
				}

				.font_4 {
					font-size: 28rpx;
					font-family: PingFangHeiTC;
					line-height: 27rpx;
					color: #bdbdbd;
				}
			}

			.space-y-20 {
				padding-bottom: 100px;
				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 20rpx;
				}
			}

			.font_1 {
				font-size: 32rpx;
				font-family: PingFangSC;
				line-height: 31rpx;
				color: #333333;
			}

			.font_2 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 19rpx;
				color: #ff3333;
			}

			.section_8 {
				padding: 16rpx 30rpx;
				background-color: #ffffff;
				border-top: solid 2rpx #f5f5f5;
				width: 100%;
				position: fixed;
				bottom: 0;

				.group_8 {
					// width: 212rpx;

					.text_8 {
						color: #ff3333;
						font-size: 36rpx;
						font-family: PingFangSC;
						line-height: 28rpx;
					}

					.text_10 {
						color: #333333;
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 23rpx;
					}
				}

				.button {
					padding: 35rpx 0;
					background-color: #54bc6e;
					border-radius: 24rpx;
					width: 242rpx;
					height: 99rpx;

					.text_9 {
						color: #ffffff;
						font-size: 30rpx;
						font-family: PingFangSC;
						line-height: 29rpx;
					}
				}
			}
		}
	}
</style>